import React, {Component} from 'react';
import {View, Text, ScrollView, ActivityIndicator,Image} from 'react-native';

class MovieDetail extends Component {
  constructor(props){
    super(props)
    this.state = {
      movieInfo: {},
      isLoading: true
    }
  }
  UNSAFE_componentWillMount() {
    fetch(`https://api.douban.com/v2/movie/subject/${this.props.id}?apikey=0df993c66c0c636e29ecbb5344252a4a`)
      .then(res => res.json())
      .then(data => {
        this.setState({
          movieInfo: data,
          isLoading: false
        })
      })
  }
  
  render() {
    return <View>
      {this.renderInfo()}
    </View>
  }
  
  renderInfo = () => {
    if (this.state.isLoading) {
      return <ActivityIndicator size="large" color="gray"></ActivityIndicator>
    } else {
      return <ScrollView>
        <View>
          <Text style={{textAlign:'center',margin:20,fontSize:30}}>{this.state.movieInfo.title}</Text>
          <View style={{alignItems:'center'}}>
            <Image source={{uri:this.state.movieInfo.images.large}} style={{width:200,height:280}}></Image>
          </View>
          <Text style={{lineHeight:26,marginTop:20}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{this.state.movieInfo.summary}</Text>
        </View>
      </ScrollView>
    }
  }
}

export default MovieDetail;
